﻿///<reference path="./FlowView.ts"/>
///<reference path="./PathView.ts"/>
namespace Flow.views
{
    export enum pointType
    {        
        IN_FLOW,
        OUT_FLOW,
        IN_PARAM,
        OUT_PARAM
    }

    export enum linkType
    {
        NO_LINK,
        LINK
    }

    export enum TextType {
        int,
        float,
        boolean,
        double,
        byte,
        short,
        long,
        string,
        array
    }

    export class Point {
        x: number;
        y: number;
        id: number;
        blockId: number;
        block: SVGGElement;
        pointType = pointType.IN_FLOW;
        linkType = linkType.NO_LINK;
        private text: SVGTextElement;
        private polygon: SVGPolygonElement;
        private circle: SVGCircleElement;
        private inPutRect: SVGRectElement;
        private inPut: SVGTextElement;
        private textType: TextType;

        constructor(block: SVGGElement)
        {
            this.block = block;
        }
        initPoint(blockId: number, id:number, pointtype: pointType, linktype: linkType, x: number, y: number)
        {
            this.blockId = blockId;
            this.id = id;
            this.pointType = pointtype;
            this.linkType = linktype;

            this.x = x;
            this.y = y;

            this.createPoint();

            if (pointtype == pointType.IN_PARAM) {
                this.textType = TextType.int
                this.setTextType(this.textType);
                if (linktype == linkType.NO_LINK) {
                    this.inPut.textContent = "12";
                }
            }
            
            //if (this.polygon) {
            //    this.polygon.addEventListener("mouseenter", this.onmousedown.bind(this.polygon), false);
            //} else if (this.circle) {
            //    this.circle.addEventListener("mouseenter", this.onmousedown.bind(this.circle), false);
            //}
        }

        setTextType(textType: TextType) {
            switch (textType) {
                case TextType.array:
                    this.text.textContent = "array";
                    break;
                case TextType.int:
                    this.text.textContent = "int";
                    break;
                case TextType.boolean:
                    this.text.textContent = "boolean";
                    break;
                case TextType.float:
                    this.text.textContent = "float";
                    break;
                case TextType.double:
                    this.text.textContent = "double";
                    break;
                case TextType.string:
                    this.text.textContent = "string";
                    break;
                case TextType.short:
                    this.text.textContent = "short";
                    break;
                case TextType.long:
                    this.text.textContent = "long";
                    break;
                case TextType.byte:
                    this.text.textContent = "byte";
                    break;
            }
        }

        updatePoint()
        {
            

        }

        //移动block时更新坐标
        setPoint(x, y) {
            this.x = x;
            this.y = y;

            if (this.polygon) {
                this.polygon.setAttribute('points', this.exitPoints(this.x, this.y));
            } else if (this.circle) {
                this.circle.setAttribute("cx", (this.x + 10) + "");
                this.circle.setAttribute("cy", (this.y + 10) + "");
                if (this.pointType == pointType.IN_PARAM) {
                    this.text.setAttribute("x", (this.x + 25) + "");
                    this.text.setAttribute("y", (this.y + 15) + "");
                    if (this.linkType == linkType.NO_LINK) {
                        this.inPutRect.setAttribute("x", (this.x + 45) + "");
                        this.inPutRect.setAttribute("y", (this.y) + "");
                        this.inPut.setAttribute("x", (this.x + 45) + "");
                        this.inPut.setAttribute("y", (this.y + 15) + "");
                    }
                }
            }
        }

        deleteInput() {
            this.block.removeChild(this.inPut);
            this.block.removeChild(this.inPutRect);
        }

        createInput() {

        }

        //创建点
        createPoint()
        {
            switch (this.pointType)
            {
                case pointType.IN_FLOW:
                case pointType.OUT_FLOW:
                    this.polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
                    this.polygon.setAttribute('points', this.exitPoints(this.x, this.y));
                    this.polygon.setAttribute('stroke', "#88817f");
                    this.polygon.setAttribute('stroke-width', "2");
                    this.polygon.setAttribute('fill', 'none');
                    this.block.appendChild(this.polygon);
                    break;
                case pointType.IN_PARAM:
                    this.text = document.createElementNS("http://www.w3.org/2000/svg", "text") as SVGTextElement;
                    this.text.setAttribute("x", (this.x + 25) + "");
                    this.text.setAttribute("y", (this.y + 15) + "");
                    this.block.appendChild(this.text);
                    if (this.linkType == linkType.NO_LINK) {
                        this.inPutRect = document.createElementNS("http://www.w3.org/2000/svg", "rect") as SVGRectElement;
                        this.inPutRect.setAttribute("x", (this.x + 45) + "");
                        this.inPutRect.setAttribute("y", (this.y) + "");
                        this.inPutRect.setAttribute("width", "40");
                        this.inPutRect.setAttribute("height", "20");
                        this.inPutRect.style.fill = "rgba(0,0,0,0)";
                        this.inPutRect.style.strokeWidth = "1";
                        this.inPutRect.style.stroke = "rgb(0,0,0)";
                        this.block.appendChild(this.inPutRect);
                        this.inPut = document.createElementNS("http://www.w3.org/2000/svg", "text") as SVGTextElement;
                        this.inPut.setAttribute("x", (this.x + 45) + "");
                        this.inPut.setAttribute("y", (this.y + 15) + "");
                        this.block.appendChild(this.inPut);
                    }
                case pointType.OUT_PARAM:
                    this.circle = document.createElementNS("http://www.w3.org/2000/svg", "circle") as SVGCircleElement;
                    this.circle.setAttribute("cx", (this.x + 10) + "");
                    this.circle.setAttribute("cy", (this.y + 10) + "");
                    this.circle.setAttribute("r", "10");
                    this.circle.setAttribute('stroke', "#88817f");
                    this.circle.setAttribute('stroke-width', "2");
                    this.circle.setAttribute('fill', 'none');
                    this.block.appendChild(this.circle);
                    break;
            }
            this.setLinkType(this.linkType);
        }
     
        //获取图像的中心点坐标
        getLinkX()
        {
            switch (this.pointType) {
                case pointType.IN_FLOW:
                    return this.x;
                case pointType.OUT_FLOW:
                    return this.x + 20;
                case pointType.IN_PARAM:
                case pointType.OUT_PARAM:
                    return this.x + 5;
            }
        }

        getlinkY() {
            switch (this.pointType) {
                case pointType.IN_FLOW:
                case pointType.OUT_FLOW:
                    return this.y + 10;
                case pointType.IN_PARAM:
                case pointType.OUT_PARAM:
                    return this.y + 5;
            }
        }

        //获取修改链接状态
        getLinkType()
        {
            return this.linkType;
        }

        setLinkType(linktype: linkType)
        {
            this.linkType = linktype;
            switch (this.linkType) {
                case linkType.LINK:
                    if (this.polygon) {
                        this.polygon.setAttribute('fill', '#88817f');
                    } else if (this.circle) {
                        this.circle.setAttribute('fill', '#88817f');
                    }
                    break;
                case linkType.NO_LINK:
                    if (this.polygon) {
                        this.polygon.setAttribute('fill', 'none');
                    } else if (this.circle) {
                        this.circle.setAttribute('fill', 'none');
                    }
                    break;
            }
        }

        setTextValue(text: string="")
        {
            this.inPut.textContent = text;
        }

        onmousedown(evt)
        {
            switch (this.linkType) {
                case linkType.LINK:
                    this.setLinkType(linkType.NO_LINK);
                    break;
                case linkType.NO_LINK:
                    this.setLinkType(linkType.LINK);
                    break;
            }
        }

        onmousemove(e: MouseEvent)
        {

        }

        onmouseup(e: MouseEvent) {

        }

        private exitPoints(x, y): string {
            // '0,0 10,0 20,10 10,20 0,20'
            let arrx: number[] = [0, 10, 20, 10, 0];
            let arry: number[] = [0, 0, 10, 20, 20];
            let arr: string = "";
            for (let i: number = 0; i < 5; i++) {
                arr += arrx[i] + x + "," + (arry[i] + y) + " ";
            }
            return arr;
        }
    }
}